<template>
  <div class="exception">
    <div class="img-block">
      <div class="img-ele" :style="{ backgroundImage: 'url(' + (pageType ? config[pageType].img : img) + ')' }"></div>
    </div>
    <div class="content">
      <h2>{{ title || config[pageType].title }}</h2>
      <div class="desc">{{ desc || config[pageType].desc }}</div>
      <div class="actions" v-if="isShowBtn">
        <slot name="actions" v-if="showAction"></slot>
        <Button type="primary" v-else @click="handleClick" size="large">返回</Button>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'Exception',
  data() {
    return {
      showAction: false,
      config: { 
        403: {
          img: 'https://gw.alipayobjects.com/zos/rmsportal/wZcnGqRDyhPOEYFcZDnb.svg',
          title: '403',
          desc: '抱歉，你无权访问该页面'
        },
        404: {
          img: 'https://gw.alipayobjects.com/zos/rmsportal/KpnpchXsobRgLElEozzI.svg',
          title: '404',
          desc: '抱歉，你访问的页面不存在'
        },
        500: {
          img: 'https://gw.alipayobjects.com/zos/rmsportal/RVRUAYdCGeYNBWoKiIwB.svg',
          title: '500',
          desc: '抱歉，服务器出错了'
        },
        noData: {
          img: 'https://gw.alipayobjects.com/zos/rmsportal/RVRUAYdCGeYNBWoKiIwB.svg',
          title: '暂无数据',
          desc: '抱歉，未搜索到内容'
        }
      }
    }
  },
  methods: {
    handleClick() {
      const isRoute = this.$router
      if (isRoute) {
        this.$router.push(this.link)
      } else {
        window.location.href = this.link
      }
    }
  },
  props: {
    pageType: {
      type: [Number,String]
    },
    title: {
      type: String
    },
    desc: {
      type: String
    },
    img: {
      type: String
    },
    link: {
      type: String
    },
    isShowBtn: {
      type:Boolean
    }
  },
  mounted() {
    this.showAction = this.$slots.actions
  }
}
</script>
<style>
.exception {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  height: 100%;
}

.exception .img-block {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 62.5%;
  flex: 0 0 62.5%;
  width: 62.5%;
  padding-right: 152px;
  zoom: 1;
}

.exception .img-block:before,
.exception .img-block:after {
  content: ' ';
  display: table;
}

.exception .img-block:after {
  clear: both;
  visibility: hidden;
  font-size: 0;
  height: 0;
}

.exception .img-ele {
  height: 360px;
  width: 100%;
  max-width: 430px;
  float: right;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 100% 100%;
}

.exception .content {
  -webkit-box-flex: 1;
  -ms-flex: auto;
  flex: auto;
}
.exception .content h2{
  font-size:40px;
  color:#0a386a;
}

.exception .content h1 {
  color: #434e59;
  font-size: 72px;
  font-weight: 600;
  line-height: 72px;
  margin-bottom: 24px;
}

.exception .content .desc {
  color: rgba(0, 0, 0, 0.45);
  font-size: 20px;
  line-height: 28px;
  margin-bottom: 16px;
}

.exception .content .actions button:not(:last-child) {
  margin-right: 8px;
}

@media screen and (max-width: 1200px) {
  .exception .img-block {
    padding-right: 88px;
  }
}

@media screen and (max-width: 576px) {
  .exception {
    display: block;
    text-align: center;
  }
  .exception .img-block {
    padding-right: 0;
    margin: 0 auto 24px;
  }
}

@media screen and (max-width: 480px) {
  .exception .img-block {
    margin-bottom: -24px;
    overflow: hidden;
  }
}
</style>
